import React, { useEffect, useState } from "react";
import { Application } from 'pixi.js'
import { MainController } from "../animation/controllers/MainController";

export const useGame = (myRef: React.RefObject<HTMLCanvasElement>) => {
    const [controller, setController] = useState<MainController>();

    useEffect(() => {
        let app = new Application({
            background: '#545358',
            width: window.innerWidth,
            height: window.innerHeight,
            // @ts-ignore 此处app.view: ICanvas未被定义为Node，引发TS报错，可忽略
            view: myRef.current,
            resizeTo: window,
        });

        setController(new MainController(app));
        // let canvas = document.getElementById("canvasWrap")!;
        // console.log("resize", canvas);
        // canvas.addEventListener("onresize", () => {
        //     console.log("resize resize");
        //     app.renderer.resize(canvas.clientWidth, canvas.clientHeight);
        // });
        // window.onresize = () => {
        //     renderer.resize(window.innerWidth, window.innerHeight)
        // }

        // const resizeObserver = new ResizeObserver(() => {
        //     app.renderer.resize(myRef?.current?.clientWidth!, myRef?.current?.clientHeight!);
        // });
        // resizeObserver.observe(myRef.current!);
        // return () => resizeObserver.disconnect(); // clean up 


        // let app = new Application({
        //     background: '#545358',
        //     width: window.innerWidth || myRef?.current?.clientWidth,
        //     height: window.innerHeight || myRef?.current?.clientHeight,
        // });

        // // @ts-ignore 此处app.view: ICanvas未被定义为Node，引发TS报错，可忽略
        // myRef?.current?.appendChild(app.view);
        // setController(new MainController(app));

        // console.log("myRef?.current?.clientWidth", myRef?.current?.clientWidth);

        // 获取容器的宽高
        // const width = rest?.width || myRef?.current?.clientWidth;
        // const height = rest?.height || myRef?.current?.clientHeight;
        // const myApp = new Application({ ...rest, width, height });
        // setApp(myApp)
        // // @ts-ignore 此处app.view: ICanvas未被定义为Node，引发TS报错，可忽略
        // myRef?.current?.appendChild(myApp.view);

        // if (!myRef.current) return;
        // const resizeObserver = new ResizeObserver(() => {
        //     console.log("333333333")
        //     myApp.renderer.resize(myRef?.current?.clientWidth, myRef.current.clientHeight);
        // });
        // resizeObserver.observe(myRef.current);
        // return () => resizeObserver.disconnect(); // clean up 
        console.log("use game effect");
    }, [])

    return {
        controller,
    }
}

export default useGame;
